<template>
  <div>
    <div class="my-form-container" style="width: 100% !important; height: 100%; margin: 0;">
      <el-form :model="formData">
        <div style="display: flex;">
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">
              <span>选课学期</span>
            </div>
            <label>{{ xueqimc }}</label>
          </el-form-item>
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">
              <span>批次名称</span>
            </div>
            <label>{{ xkpcName }}</label>
          </el-form-item>
        </div>
        <div style="display: flex;">
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">
              <span>待选课门数</span>
            </div>
            <label>{{ chooseLimit }}</label>
          </el-form-item>
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">
              <span>选课时间</span>
            </div>
            <label>{{ xkpcStartTime }} - {{xkpcEndTime}}</label>
          </el-form-item>
        </div>
      </el-form>
      <div style="display: flex; margin: 20px;"></div>
      <el-table
        border
        :data="tableData"
        @selection-change="handleSelectionChange"
        class="xpaas-table-class"
        row-class-name="xpaas-row-class"
        cell-class-name="xpaas-cell-class"
        header-row-class-name="xpaas-header-row-class"
        header-cell-class-name="xpaas-header-cell-class">
        <el-table-column type="selection" width="60" align="center" />
        <el-table-column label="调整学员" align="center">
          <template slot-scope="scope">
            <div style="display: flex; justify-content: center;">
              <ButtonItem
                @click="adjustStudents(scope.row)"
                :name="'调整学员'"
                :link="''"
                :icon="'el-icon-refresh'"
                :buttonColor="'blue'"
              ></ButtonItem>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="classname" label="教学班" show-overflow-tooltip align="center" />
        <el-table-column prop="courseCode" label="课程[编号]名称" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            [{{scope.row.courseCode}}] {{scope.row.coursename}}
          </template>
        </el-table-column>
        <el-table-column prop="sktime" label="上课时间/主讲教员/上课地点" show-overflow-tooltip align="center" >
          <template slot-scope="scope">
            <span>{{scope.row.sktime}} / {{scope.row.mainemployeeids}} / {{scope.row.skplace}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="reservenum" label="确定人数" show-overflow-tooltip align="center" />
        <el-table-column prop="maxnum" label="最大预选数" show-overflow-tooltip align="center" />
        <el-table-column prop="xkyq" label="选课要求" show-overflow-tooltip align="center" />
        <el-table-column prop="preselectionnum" label="预选人数" show-overflow-tooltip align="center" />
        <el-table-column prop="positivenum" label="正选人数" show-overflow-tooltip align="center" />
      </el-table>





      <el-dialog title="添加学员" :visible.sync="dialogShow" width="1500px">
        <el-form label-suffix="：" label-position="left" style="display: flex;">
          <el-form-item label-width="85px" label="培养层次">
            <el-select v-model="dialogForm.level" size="mini" clearable placeholder="请选择培养层次" style="margin: 0 20px 0 -15px;">
              <el-option v-for="(item, index) in levelList" :key="index" :label="item.dictValue" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label-width="55px" label="年级">
            <el-select v-model="dialogForm.grade" size="mini" clearable placeholder="请选择年级" style="margin: 0 20px 0 -15px;" @change="handleChangeYear">
              <el-option v-for="(item, index) in gradeList" :key="index" :label="item.xqszxn" :value="item.xqszxn" />
            </el-select>
          </el-form-item>
          <el-form-item label-width="55px" label="专业">
            <el-select v-model="dialogForm.major" size="mini" clearable placeholder="请选择专业" style="margin: 0 20px 0 -15px;">
              <el-option v-for="(item, index) in majorList" :key="index" :label="item.specialtyName" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label-width="70px" label="学员队">
            <el-select v-model="dialogForm.team" size="mini" clearable placeholder="请选择学员队" style="margin: 0 20px 0 -15px;">
              <el-option v-for="(item, index) in teamList" :key="index" :value="item.id" :label="item.deptName" />
            </el-select>
          </el-form-item>
          <el-form-item label-width="55px" label="学号">
            <el-input v-model="dialogForm.studentNo" size="mini" clearable placeholder="请输入学号" style="margin: 0 20px 0 -15px;" />
          </el-form-item>
          <el-form-item label-width="55px" label="姓名">
            <el-input v-model="dialogForm.studentName" size="mini" clearable placeholder="请输入姓名" style="margin: 0 20px 0 -15px;" />
          </el-form-item>
          <div class="button-style" style="width: 80px; margin-top: 6px;" @click="handleSearch">
            <img src="@/assets/assessment/icon-search.png" alt="" />
            <span>查询</span>
          </div>
        </el-form>
        <el-table
          border
          :data="tableData1"
          :height="445"
          class="xpaas-table-class"
          row-class-name="xpaas-row-class"
          cell-class-name="xpaas-cell-class"
          header-row-class-name="xpaas-header-row-class"
          header-cell-class-name="xpaas-header-cell-class"
          @selection-change="handleSelectionRow">
          <el-table-column type="selection" width="60" />
          <el-table-column prop="studentCode" label="学号" show-overflow-tooltip align="center" />
          <el-table-column prop="studentName" label="姓名" show-overflow-tooltip align="center" />
          <el-table-column prop="gender" label="性别" show-overflow-tooltip align="center" />
          <el-table-column prop="grade" label="年级" show-overflow-tooltip align="center" />
          <el-table-column prop="zy" label="专业" show-overflow-tooltip align="center" />
          <el-table-column prop="studentdui" label="学员队" show-overflow-tooltip align="center" />
          <el-table-column prop="pylevel" label="培养层次" show-overflow-tooltip align="center" />
        </el-table>
        <div style="display: flex; flex-direction: row-reverse; padding-bottom: 15px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            style="padding: 0; margin-top: 15px;">
          </el-pagination>
        </div>
        <div style="display: flex; justify-content: center;">
          <div class="button-style" @click="handleSave">
            <span>确&emsp;定</span>
          </div>
          <div class="button-style" style="margin-left: 50px; background: #FFEEEF; border: 1px solid #FA533C;" @click="dialogShow = false">
            <span style="color: #FA533C;">取&emsp;消</span>
          </div>
        </div>
      </el-dialog>
    </div>


    <!--<div class="bottom-block" style="display: block">-->
      <!--<div class="text">-->
        <!--当前共找到{{ total }}条记录,当前显示{{ startPage }}-{{ endPage }}条-->
      <!--</div>-->
      <!--<div class="export-button">-->
        <!--<img src="../../../../../assets/assessment/icon-export.png" alt="" />-->
        <!--&lt;!&ndash; <span>导出Excel</span> &ndash;&gt;-->
        <!--<download-excel-->
          <!--class="export-btn"-->
          <!--:data="tableData"-->
          <!--:fields="jsonFields"-->
          <!--type="xls"-->
          <!--name="课表安排学时统计.xls"-->
          <!--style="color: #f3b815"-->
        <!--&gt;-->
          <!--&ensp;导出Excel-->
        <!--</download-excel>-->
      <!--</div>-->
    <!--</div>-->
  </div>


</template>

<script>
  import { selectedBatchCourseList,   queryClassDetail, queryStudentList, removeStudents, updateStudents, queryStudentsList, batchAddstudents } from '@/api/trainingManagement/place'
  import { reqCheckYearList, reqCheckLevelList, queryDictByCode, reqXydList } from '@/api/admin1/check'
  import { reqSpeByYear } from '@/api/classHoursAddList/addList'
  import ButtonItem from "@/components/ButtonItem.vue";
  export default {
    components: {
      ButtonItem,
    },
    data() {
      return {
        xkpcId: '',
        xkpcName: '',
        xkpcStartTime: '',
        xkpcEndTime: '',
        chooseLimit: '',
        xueqi: '',
        xueqimc: '',

        total: 0, //总条数
        pageSize: 1000, //条数
        startPage: 0, //开始条数
        endPage: 0, //结束条数
        currentPage: 1, //当前页数



        classNo: '',
        formData: {},
        tableData: [],
        tableData1: [],
        selectedRows: [],
        status: '',
        speClass: '',
        statusList: [],
        classList: [],
        dialogShow: false,
        selectRow: [],
        selectRow1: [],
        dialogForm: {
          level: '',
          grade: '',
          major: '',
          team: '',
          studentNo: '',
          studentName: ''
        },
        levelList: [],
        gradeList: [],
        majorList: [],
        teamList: []
        // classNo:this.$route.query.classNo||'',
        //   selectList: [
        //   {
        //     type: "select",
        //     name: "状态:",
        //     val: "全部",
        //     valList: [
        //       {
        //         value: "全部",
        //         label: "全部",
        //       }
        //     ],
        //   },
        //   {
        //     type: "select",
        //     name: "专业班次:",
        //     val: "全部",
        //     valList: [
        //       {
        //         value: "全部",
        //         label: "全部",
        //       }
        //     ],
        //   },
        //   ],
        // setClassNameDialog: false, //设置课程检查弹窗
        // tableData: [],
        // jxbmc: "英语", //教学班名称
        // kcmc: "英语名称", // 课程名称
        // ykcjc: "英", //原课程简称
        // xkcjc: "", //现课程简称
        // data:{},
        // selectStudentList:[]//选中学生
      };
    },
    mounted() {
        this.xkpcId = this.$route.query.xkpcId;
        this.xkpcName = this.$route.query.xkpcName;
        this.xkpcStartTime = this.$route.query.xkpcStartTime;
        this.xkpcEndTime = this.$route.query.xkpcEndTime;
        this.chooseLimit = this.$route.query.chooseLimit;
        this.xueqi = this.$route.query.xueqi;
        this.xueqimc = this.$route.query.xueqimc;

        this.getTeachingClassInfo()
      // if(this.classNo!=''){
      //   this.init();
      // }
    },
    methods: {
      getTeachingClassInfo(){
        let xueqi = this.xueqi;
        let classname = '';
        let xkpc = this.xkpcId;
        let current = this.currentPage;
        let size = this.pageSize;

        selectedBatchCourseList(xueqi,classname, xkpc, current, size).then(res=>{
          if(res.data.code == 200){
            this.tableData = res.data.data.records;
            this.total = res.data.data.total;
          }
        })
      },
      adjustStudents(row){
        this.$router.push({
          path:"/admin/elective/adjustmentStudents",
          query:{
            classNo:row.classno
          }
        });
      },
      handleSearch: function () {
        const params = {
          pylevelid: this.dialogForm.level,
          studentduiid: this.dialogForm.team,
          grade: this.dialogForm.grade,
          zyid: this.dialogForm.major,
          studentcode: this.dialogForm.studentNo,
          studentname: this.dialogForm.studentName
        }
        queryStudentsList(params, this.currentPage, this.pageSize).then(res => {
          if (res.data.code === 200) {
            this.tableData1 = res.data.data.records
            this.total = res.data.data.total
          }
        })
      },
      handleChangeYear: function (val) {
        reqSpeByYear(val).then(res => {
          if (res.data.data && res.data.data.length > 0) {
            this.majorList = res.data.data
          }
        })
      },
      handleSave: function () {
        if (this.selectRow1.length === 0) {
          this.$message.warning('请选择需要添加的学员！')
        } else {
          let data = []
          this.selectRow1.forEach(item => {
            data.push({
              classno: this.classNo,
              studentid: item.studentid,
              studentstate: '预选',
              courseid: this.formData.courseid,
              studentname: item.studentName,
              sex: item.gender,
              zybcid: item.zybcid,
              zybc: item.zy,
              studentdui: item.studentdui,
              studentcode: item.studentCode
            })
          })
          batchAddstudents(data).then(res => {
            if (res.data.code === 200) {
              this.handleInitTable()
              this.$message.success(res.data.data)
              this.dialogShow = false
            }
          })
        }
      },
      handleSelectionChange: function (val) {
        this.selectedRows = val
      },
      handleClearReserve: function () {
        let studentArray = []
        this.selectedRows.forEach(item => {
          if (item.studentstate !== '正选') {
            studentArray.push({
              id: item.id,
              studentstate: '正选'
            })
          }
        })
        if (studentArray.length > 0) {
          updateStudents(studentArray).then(res => {
            if (res.data.code === 200) {
              this.handleInitTable()
              this.$message.success('转正选成功！')
            } else {
              this.$message.warning('转正选失败！')
            }
          })
        } else {
          this.$message.warning('没有可转正选数据！')
        }
      },
      handleToReserve: function () {
        let studentArray = []
        this.selectedRows.forEach(item => {
          if (item.studentstate !== '预选') {
            studentArray.push({
              id: item.id,
              studentstate: '预选'
            })
          }
        })
        if (studentArray.length > 0) {
          updateStudents(studentArray).then(res => {
            if (res.data.code === 200) {
              this.handleInitTable()
              this.$message.success('转预选成功！')
            } else {
              this.$message.warning('转预选失败！')
            }
          })
        } else {
          this.$message.warning('没有可转预选数据！')
        }
      },
      handleChangeClass: function () {
        const studentNos = this.handleCheckSelectRows()
        if (studentNos.length > 0) {
          this.$router.push({
            path: '/admin/elective/turnClass',
            query: { selectedRows: this.selectedRows }
          })
        }
      },
      handleAddStudent: function () {
        this.dialogForm.level = ''
        this.dialogForm.grade = ''
        this.dialogForm.major = ''
        this.dialogForm.team = ''
        this.dialogForm.studentNo = ''
        this.dialogForm.studentName = ''
        reqSpeByYear("").then(res => {
          if (res.data.data && res.data.data.length > 0) {
            this.majorList = res.data.data
          }
        })
        reqXydList().then(res => {
          if (res.data.data && res.data.data.length > 0) {
            this.teamList = res.data.data
          }
        })
        reqCheckYearList().then((res) => {
          if (res.data.data && res.data.data.length > 0) {
            this.gradeList = res.data.data
          }
        })
        reqCheckLevelList().then(res => {
          if(res.data.data && res.data.data.length > 0){
            this.levelList = res.data.data[0].children
            this.handleSearch()
          }
        })
        this.dialogShow = true
      },
      handleDeleteStudent: function () {
        const studentNos = this.handleCheckSelectRows()
        if (studentNos.length > 0) {
          this.$confirm('是否删除选中的学员信息？', '操作提示', {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            removeStudents(studentNos).then(res => {
              if (res.data.code === 200) {
                this.handleInitTable()
                this.$message.success('学员信息删除成功！')
              } else {
                this.$message.warning('学员信息删除失败！')
              }
            })
          })
        }
        return studentNos
      },
      handleDelete: function (row) {
        this.$confirm('是否删除学员信息？', '操作提示', {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          removeStudents(row.id).then(res => {
            if (res.data.code === 200) {
              this.handleInitTable()
              this.$message.success('学员信息删除成功！')
            } else {
              this.$message.warning('学员信息删除失败！')
            }
          })
        })
      },
      handleCheckSelectRows: function () {
        let studentNos = ''
        let studentArray = []
        if (this.selectedRows.length === 0) {
          this.$message.warning('请选择学员记录！')
        } else {
          this.selectedRows.forEach(item => {
            studentArray.push(item.id)
          })
          studentNos = studentArray.join(',')
        }
        return studentNos
      },
      handleChangeStatus: function () {
        this.handleInitTable()
      },
      handleChangeSpeClass: function () {
        this.handleInitTable()
      },
      handleInitTable: function (type) {
        const params = {
          classno: this.classNo,
          studentstate: this.status,
          zybcid: this.speClass
        }
        queryStudentList(params).then(res => {
          if (res.data.code === 200) {
            this.tableData = res.data.data
            if (type === 'init') {
              this.classList = []
              let map = new Map()
              this.tableData.forEach(item => {
                item.className = this.formData.classname
                if (!map.has(item.zybcid)) {
                  map.set(item.zybcid, item.zybc)
                  this.classList.push({ value: item.zybcid, label: item.zybc })
                }
              })
            }
          }
        })
      },
      handleSelectionRow: function (val) {
        this.selectRow1 = val
      },
      handleCurrentChange: function (val) {
        this.currentPage = val
        this.handleSearch()
      },
      handleSizeChange: function (val) {
        this.pageSize = val
        this.handleSearch()
      }
      //   init(){
      //     this.getLast();
      //     this.getClassStudent(this.classNo);
      //     this.getClassInfo(this.classNo);
      //   },
      //   //获取专业班次列表
      //   async getLast(){
      //     let res = await getZYBC('');
      //     if(res.code == 200 && res.data.length>0){
      //       this.selectList[2].valList = res.data;
      //       }
      //   },
      //   handleSelectionChange(val) {
      //     this.selectStudentList = val;
      //   },
      //   getClassInfo(id){
      //     return new Promise(() => {
      //       let el = this
      //       xxkkkgl_getClassInfo(id).then(res => {
      //         if (res.data.code === 200) {
      //          el.data = res.data.data;
      //         }
      //       })
      //     })
      //   },
      //   getClassStudent(id){
      //     return new Promise(() => {
      //       let el = this
      //       xxkkkgl_getClassStudent(id).then(res => {
      //         if (res.data.code === 200) {
      //          el.tableData = res.data.data;
      //         }
      //       })
      //     })
      //   },
      //   tianjiaXY() {
      //     this.$router.push("/admin/elective/addStudent");
      //   },
      //   zhuanJXB() {
      //     this.$router.push("/admin/elective/turnClass");
      //   },
      //   // 信息修改
      //   editInfo() {},
      //   // 批量设置主讲教员
      //   batchSettingTeacher() {
      //     this.$router.push("/admin/elective/batchSettingTeacher");
      //   },
      //   //选择上课场地
      //   selectClassRoom() {
      //     this.$router.push("/admin/elective/selectClassRoom");
      //   },
      //   deleteRow(row, index) {
      //     let stuList =[row.id]
      //     let params={
      //       classNo:this.classNo,
      //       list:stuList
      //     }
      //     return new Promise(() => {
      //       xxkkkgl_deleteStudent(params).then(res => {
      //         if (res.data.code == 200) {
      //           this.$message.warning("删除成功!");
      //           this.init();
      //         }
      //       })
      //     })
      //   },
      //   delStudent(){
      //     if (this.selectStudentList.length > 0) {
      //       let stuList = []
      //       this.selectStudentList.forEach(item => {
      //         stuList.push(item.id)
      //       })
      //        let params={
      //         classNo:this.classNo,
      //         list:stuList
      //       }
      //       return new Promise(() => {
      //         let el = this
      //         xxkkkgl_deleteStudent(params).then(res => {
      //           if (res.data.code == 200) {
      //             this.$message.warning("删除成功!");
      //             this.init();
      //           }
      //         })
      //       })
      //     } else {
      //       this.$message.warning("请先选择要删除的课程列表");
      //       return
      //     }
      //   },
      //   zhuanZX(){
      //     if (this.selectStudentList.length > 0) {
      //       let stuList = []
      //       this.selectStudentList.forEach(item => {
      //         stuList.push(item.id)
      //       })
      //        let params={
      //         classNo:this.classNo,
      //         list:stuList
      //       }
      //       return new Promise(() => {
      //         xxkkkgl_zZx(params).then(res => {
      //           if (res.data.code == 200) {
      //             this.$message.warning("转正选成功!");
      //             this.init();
      //           }
      //         })
      //       })
      //     } else {
      //       this.$message.warning("请先选择要删除的课程列表");
      //       return
      //     }
      //   },
      //   zhuanYX(){
      //     if (this.selectStudentList.length > 0) {
      //       let stuList = []
      //       this.selectStudentList.forEach(item => {
      //         stuList.push(item.id)
      //       })
      //        let params={
      //         classNo:this.classNo,
      //         list:stuList
      //       }
      //       return new Promise(() => {
      //         xxkkkgl_zYx(params).then(res => {
      //           if (res.data.code == 200) {
      //             this.$message.warning("转预选成功!");
      //             this.init();
      //           }
      //         })
      //       })
      //     } else {
      //       this.$message.warning("请先选择要删除的课程列表");
      //       return
      //     }
      //   }
    }
  }
</script>

<style scoped lang="less">
  .button-style {
    float: left;
    background: #f1f8fe;
    border: 1px solid #51aef6;
    width: auto;
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    box-sizing: border-box;
    > img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }
    > span {
      font-size: 14px;
      color: #51aef6;
    }
  }
  @fontFamily:"Microsoft YaHei";
  .xpaas-table-class {
    border: 1px solid #004ca7;
    border-radius: 9px;
    ::v-deep div.el-table__header-wrapper {
      table.el-table__header {
        thead {
          tr.xpaas-header-row-class {
            padding: 0;
            height: 60px;
            background-color: #edf2f9;
            font-size: 16px;
            font-family: @fontFamily;
            font-weight: bold;
            line-height: 20px;
            color: #004ca7;
            th.xpaas-header-cell-class {
              font-weight: bold;
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              background-color: #edf2f9;
              div.cell {
                font-size: 16px;
                font-weight: bold;
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
          }
        }
      }
    }
    ::v-deep div.el-table__body-wrapper {
      table.el-table__body {
        tbody {
          tr.xpaas-row-class {
            td.xpaas-header-cell-class {
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              background-color: #edf2f9;
              div.cell {
                font-size: 16px;
                font-weight: bold;
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
            td.xpaas-cell-class {
              height: 60px;
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              div.cell {
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
          }
        }
      }
    }
  }
  .my-form-item {
    width: 100%;
    height: 60px;
    border-bottom: 1px solid rgba(0, 76, 167, 0.39);
    margin-bottom: 0;
    > div {
      display: flex;
      height: 100%;
      &:nth-child(2) {
        .my-form-item-label {
          border-left: 1px solid rgba(0, 76, 167, 0.39);
        }
      }
      .my-form-item-label {
        width: 220px;
        padding-left: 0;
        background: rgba(0, 76, 167, 0.1);
        display: flex;
        flex: none;
        align-items: center;
        justify-content: center;
        color: #004ca7;
        font-size: 16px;
        font-weight: bold;
        border-left: 1px solid rgba(0, 76, 167, 0.39);
      }
      .mustW {
        color: red;
      }
      .el-form-item__content {
        display: flex;
      }
    }
    label {
      width: 100%;
      margin: 10px 30px 0;
      color: #004ca7;
    }
  }
  .itemTitle {
    font-size: 14px;
    color: #004ca7;
  }
  /deep/ .el-dialog {
    height: 700px;
    overflow: hidden;
  }
  /deep/ .el-form-item__label {
    color: #004ca7;
    font-size: 14px;
  }

  .pagination-block {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
</style>
